<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p{
            color:red;
            margin-left:20px;
            display:inline-block;
        }
        .c{
            color:red;
            margin-left:4px;
            display:inline-block;
        }
        .l{
            font-size:18px;
        }
        .d{
            height:35px;
            width:300px;
            display:inline;
        }
        .i{
            height:30px;
            width:300px;
        }


    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div style="height:80px;"></div>
    <form enctype="multipart/form-data">
        <div style="width:500px;float:left;margin:0 20px;">
            <div style="font-size:28px;">注册新用户</div>
            <br/>
            <span class="p">*</span>
            <label for="name" class="l">用户名:</label>
            <div style="height:35px;width:300px;position:relative;display:inline;">
                <input id="name" type="text" style="height:30px;width:250px;padding-right:50px;">
                <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;" ></span>
            </div>
            <br/><br/>
            <span class="p">*</span>
            <label for="telphone" class="l">手机号:</label>
            <div  class="d">
                <input id="telphone" type="text" class="i">
            </div>
            <br/><br/>
            <span class="c">*</span>
            <label for="password" class="l">登录密码:</label>
            <div  class="d">
                <input id="password" type="text" class="i">
            </div>
            <br/><br/>
            <span class="c">*</span>
            <label for="age" class="l">年龄:</label>
            <div  class="d">
                <input id="age" type="text" class="i">
            </div>
            <br/><br/>
            <label for="gender" class="l">性别:</label>
            <div  class="d">
                <input id="gender" type="text" class="i">
            </div>
            <br/><br/>
            <span class="p">*</span>
            <label for="otp" class="l">验证码:</label>
            <div  class="d">
                <input id="otp" type="text" class="i">
            </div>
            <br/><br/>
            <input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1"/>
            <span style="font-size:10px;">我已阅读并同意《用户注册协议》</span>
            <br/><br/>
            <input type="submit" id="register" value="同意以上协议并注册" style="margin-left:100px;height:30px;width:300px;background-color:red;display:inline-block;"/>
        </div>
    </form>
    <script>

        $("#register").on("click",function () {
            var telphone = $("#telphone").val()
            var name = $("#name").val()
            var otp = $("#otp").val()
            var age = $("#age").val()
            var gender = $("#gender").val()
            var password = $("#password").val()
            $.ajax({
                type:"POST",
                contentType:"application/x-www-form-urlencoded",
                url:"http://localhost:8090/user/register",
                xhrFields: {withCredentials: true},
                data:{
                    "telphone":telphone,
                    "name":name,
                    "age":age,
                    "gender":gender,
                    "password":password,
                    "otpCode":otp
                },
                success: function (data) {
                    if(data.status==="success"){
                        alert("注册成功")
                    }else {
                        alert("注册失败"+ data.data.errMsg)
                    }
                },
                error:function (data) {
                    alert("注册失败"+ data.responseText)
                }
            })
            return false

        })


    </script>
</body>
</html>
